<template>
  <div class="default-layout">
    <div class="menu-box">
      <nuxt-link v-for="(item, index) in menu" :key="index" :to="item.url" active-class="active-route">
        <p class="menu-item">{{ item.label }}</p>
      </nuxt-link>
    </div>
    <div class="content-box">
      <!-- nuxt 同 vue 的 router-view -->
      <nuxt />
    </div>
  </div>
</template>

<script>
export default {
  middleware({ store, route, redirect, params, query, req, res }) {
    // layouts 的全局守卫
  },
  data() {
    return {
      menu: [
        {
          label: '首页',
          url: '/index'
        },
        {
          label: '路由',
          url: '/route'
        },
        {
          label: '数据请求',
          url: '/data'
        },
        {
          label: 'Vuex',
          url: '/store'
        },
        {
          label: '全局',
          url: '/global'
        },
      ]
    }
  }
}
</script>

<style scoped>
.el-menu {
  border-right: none;
}

.default-layout {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.menu-box {
  width: 200px;
  height: 100%;
  background-color: #545c64;
}

.menu-item {
  padding-left: 20px;
  display: flex;
  align-items: center;
  width: 200px;
  height: 50px;
  color: #fff;
}

.active-route .menu-item {
  background-color: #009cf7;
}


.content-box {
  flex-grow: 1;
  padding: 20px;
}
</style>